<template>
	<view>
		<view class="map">
		  <map
		    id="map_container"
		    :latitude="latitude"
		    :longitude="longitude"
		    :markers="markers"
			
		    enable-3D="false"
		    :show-compass="true"
		    :enable-satellite="false"
		    :enable-traffic="false"
		    :show-location="true"
			:polyline="polyline"
		    scale="12"
		  />
		</view>
		<view class="footer">
			<view class="footer-top">
			<u-subsection  :list="list" @change="sectionChange" :current="curNow" inactiveColor="rgba(145, 145, 145, 1)" activeColor="rgba(239, 77, 61, 1)" fontSize="16"></u-subsection>
		   </view>
		    <view v-if="curNow!=1">
		    	<view class="box">
		    	   <u-search  @click="opens()" disabled placeholder="请输入车牌精准查询" v-model="val" shape="square" bg-color="#fff" border-color="#D3D3D3" placeholder-color="#D6D6D6" :show-action="false"></u-search>
		    	   <view class="btn" @click="to_search()"><i class="icon iconfont icon-ssk">查询</i></view>
		    	</view>
		    	<view class="history">
		    		<text>历史搜索</text>
					<view class="searchHistoryItem">
									<view v-for="(item, index) in historyList" :key="index">
										<text @click="increase(item)">{{ item }}</text>
									</view>
								</view>
		    	</view>
		    </view>
			<view v-else>
				<view class="box">
				   <u-search   @click="opens1()" disabled placeholder="请输入车牌精准查询" v-model="vals" shape="square" bg-color="#fff" border-color="#D3D3D3" placeholder-color="#D6D6D6" :show-action="false"></u-search>
				   <view class="btn" @click="to_search1()"><i class="icon iconfont icon-ssk">查询</i></view>
				</view>
				<view class="example-body">
							<uni-datetime-picker
								v-model="datetimerange"
								type="datetimerange"
								:start='start'
								:end='end'
								clear-icon="false"
								rangeSeparator="至"
							/>
						</view>
			</view>
			<u-popup :show="topshows" mode="top"  @close="topclose" @open="topopen" :overlay="false">
				<view class="topinformation">
				  <u-icon @click="topclose" name="close"  size="28"></u-icon>
				  <view class="topinformation1">
				  	<text v-if="placeList.offlineState===true" style="color: #fff;background-color: rgba(239, 77, 61, 1);padding: 0 22upx;margin-right: 20upx;font-size: 30upx;">在线</text>
					<text v-else style="color: #fff;background-color: rgba(239, 77, 61, 1);padding: 0 22upx;margin-right: 20upx;font-size: 30upx;">离线</text>
					<text>{{placeList.vno}}</text>
				  </view>
				  <view class="topinformation1">
				  	<text>更新时间：</text>
				  	<text>{{times}}</text>
				  </view>
				  <view class="topinformation1">
				  	<text>当前车速：</text>
				  	<text>{{placeList.spd}}km/h</text>
				  </view>
				  <view class="topinformation1">
				  	<text>行驶方向：</text>
				  	<text>{{drc}}</text>
				  </view>
				  <view class="topinformation1">
				  	<text>位置信息：</text>
				  	<text>{{placeList.adr}}</text>
				  </view>
				</view>
			</u-popup>
		   	 	<u-popup :show="show" mode="bottom"  @close="close" @open="open">
					<view class="car-number">
						<view class="popup-head">
						   <u-icon @click="close" name="close"  size="28"></u-icon>
						   <text style="margin-left: 50upx;">请输入车牌号</text>
						   <text class="popup-history">历史车牌</text>
						</view>
						<view class="car-number-inputs">
							<car-number-input
							  @numberInputResult="numberInputResult"
							  :defaultStr="defaultNum"
							>
							</car-number-input>
						</view>
					<view class="carColor">
						<text>车辆颜色</text>
						 <uni-data-select
						      v-model="carvalue"
						      :localdata="range"
						      @change="change"
						    ></uni-data-select>
					</view>
						<view class="popup-btn">
							<button @click="true1()">确认</button>
						</view>
					</view>
		   		</u-popup>
				<u-popup :show="show1" mode="bottom"  @close="close" @open="open1">
					<view class="car-number">
						<view class="popup-head">
						   <u-icon @click="close" name="close"  size="28"></u-icon>
						   <text style="margin-left: 50upx;">请输入车牌号</text>
						   <text class="popup-history">历史车牌</text>
						</view>
						<view class="car-number-inputs">
							<car-number-input
							  @numberInputResult="numberInputResult"
							  :defaultStr="defaultNum"
							>
							</car-number-input>
						</view>
					<view class="carColor">
						<text>车辆颜色</text>
						 <uni-data-select
						      v-model="carvalue"
						      :localdata="range"
						      @change="change"
						    ></uni-data-select>
					</view>
						<view class="popup-btn">
							<button @click="trues()">确认</button>
						</view>
					</view>
				</u-popup>
		</view>
		<view class="orders">
			<text>定位剩余<text class="order-text">{{remainingAttempts}}</text>次</text>
		</view>
		<!-- 付费查询 -->
		<view class="">
			<u-popup :show="ordershow" mode="center"  @close="orderclose" @open="orderopen">
				<view class="err-img">
					<image
					  src="/static/lingdang.png"
					></image>
				</view>
				<view class="order-popup">
				 <p class="order-p1">温馨提示</p>
				  <p class="order-p2">今日免费查询次数已用完</p>
				  <button @click="topay()">付费查询</button>
				</view>
			</u-popup>
		</view>
		<view class="">
			<u-popup :show="payshow" mode="bottom"  @close="payclose" @open="payopen">
				<view class="contact_box">
					<view class="contact_box1">
						 <u-icon @click="payclose" name="close"  size="28"></u-icon>
						<image src="../../static/iocn34.png"></image>
						<input type="text" v-model="totalFee" placeholder="00.00" />
					</view>
					<view class="contact_box2">
						<image src="../../static/money.png" mode=""></image>
						<view class="contact_box2_text">
							<text>个人账户</text>
							<text >可用余额:{{nowMoney}}元</text>
						</view>
						<image src="../../static/iocn25.png" mode=""></image>
					</view>
					<view class="weixinpay" @click="weipay()">
						<image src="../../static/iocn32.png" mode=""></image>
						<text>微信支付</text>
						<image src="../../static/iocn11.png" mode=""></image>
					</view>
					<button @click="pays()">立即付款</button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		CreateSign,
		transTimeManageV3,
		GetUserById,
		CreateTrade,
		PushNotify,
		routerPath
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import Tabbar from '@/pages/navigation/sjnavigation.vue';
	export default {
		components: {
			//注册组件
			Tabbar
		},
		data() {
			return {
				 maxAttempts: 3,
				      remainingAttempts: 3,
				      lastRefreshTime: null,
				      refreshCooldown: 24 * 60 * 60 * 1000, // 24小时的毫秒数
				order:'3',
				totalFee: '',
				nowMoney:'',
				datetimerange:  [],
				historyList:[],
				placeList:[],
				drc:'',
				times:'',
				payshow:false,
				ordershow:false,
			    show: false,
				show1:false,
				topshows:false,
				canInvoiced:false,
				val:'',
				vals:'',
				qryBtm:'',
				qryEtm:'',
				start: Date.now() - 1000000000*100,
				end: Date.now() + 1000000000*100,
				carvalue: 0,
				     range: [
				       { value: 1, text: "蓝" },
				       { value: 2, text: "黄" },
				       { value: 3, text: "黄绿色" },
				     ],
				  defaultNum: "",
				adress:'南通市港间区顺达路299号磊鑫物流园高台仓库',
				skipCount: 0,
				maxResultCount: 10,
				list: [],
				isLoadMore: false, //是否加载中,
				latitude: 39.899,
				longitude: 116.39742,
				key: "e9f1231c3e04f846432856dafa4e0a97",
				polyline: [
								{
									width: 8,
									points: [],
									arrowLine: true,
									color: '#3591FC',
								}
							],
				markers: [
				  {
				    id: 1, // Number
				    title: "1", // String-标注点名
				    latitude: 39.899,
				    longitude: 116.39742,
				    width: 30,
				    height: 30,
				    iconPath: "../../static/iocn55.png", // 显示的图标
				  }
				],
				 list: [ '车辆定位', '车辆轨迹'],
				 curNow:0
			};
		},
		onLoad() {
			 // 组件挂载时加载本地存储的数据
			    this.loadFromLocalStorage();
			    // 检查是否需要恢复刷新次数
			    this.checkRefreshAvailability();
			    this.remainingAttempts=getValue('remainingAttempts')
				if(this.remainingAttempts==='' || this.remainingAttempts===NaN || this.remainingAttempts===undefined){
					this.remainingAttempts=3
					setValue('remainingAttempts', this.remainingAttempts);
				}
				let value = getValue('historyList')
						if (value) {
							this.historyList = JSON.parse(value).slice(0,6)
						}
						
			// uni.hideHomeButton();
		},
		//监听页面触底函数
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.skipCount += 10
				// this.GetCallRecord()
			}
		},
		watch: {
					datetimerange(newval) {
						console.log("范围选:", this.datetimerange);
						this.qryBtm=this.datetimerange[0]
						this.qryEtm=this.datetimerange[1]
					},
				},
		methods: {
			
			getplace(lat,lon) {
			  //腾讯地图 详细地址 获取坐标经纬度
			  //key需要去腾讯地图官方控制台获取
   uni.request({
              url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lon}&key=LDXBZ-TTGRI-6CJGB-UNANB-J3CB7-G3FST`,
              success: (res) => {
                this.latitude=res.data.result.location.lat
				this.longitude=res.data.result.location.lng
				this.markers[0].latitude=res.data.result.location.lat
				this.markers[0].longitude=res.data.result.location.lng
              },
            });
			},
			//车辆颜色
			 change(e) {
			      console.log("e:", e);
				  this.carvalue=e
			    },
			async CreateSign() {
			var cid ='417a1452-00ff-4060-af52-f959d5b74374'
			var vnos=`${this.val}`
				if (vnos == ""|| vnos == NaN || vnos == undefined ) {
				  uni.showToast({
				    title: "车牌号不能为空",
				    icon: "none",
				    duration: 2000,
				  });
				  return false;
				}
				
				try {
					const {
						data: res
					} = await CreateSign({
						vnos,
						cid
					})
					this.transTimeManageV3(res.result);
				} catch (e) {}
			},
			async CreateSign1() {
				var cid ='417a1452-00ff-4060-af52-f959d5b74374'
				var vclN=`${this.vals}`
				var vco=`${this.carvalue}`
				var qryBtm=this.qryBtm
				var qryEtm=this.qryEtm
				if(qryBtm===""|| qryBtm===NaN || qryBtm===undefined){
					uni.showToast({
					  title: "开始日期不能为空",
					  icon: "none",
					  duration: 2000,
					});
					return false;
				}
				if(qryEtm===""|| qryEtm===NaN || qryEtm===undefined){
					uni.showToast({
					  title: "结束日期不能为空",
					  icon: "none",
					  duration: 2000,
					});
					return false;
				}
				
				if (vclN == ""|| vclN == NaN || vclN == undefined ) {
				  uni.showToast({
				    title: "车牌号不能为空",
				    icon: "none",
				    duration: 2000,
				  });
				  return false;
				}
				try {
					const {
						data: res
					} = await CreateSign({
						vclN,
						vco,
						qryBtm,
						qryEtm,
						cid
					})
					this.routerPath(res.result);
				} catch (e) {}
			},
			async routerPath(data) {
				this.topshows=false
				var cid ='417a1452-00ff-4060-af52-f959d5b74374'
				var vclN=`${this.vals}`
				var sign=data
				var vco=`${this.carvalue}`
				var qryBtm=this.qryBtm
				var qryEtm=this.qryEtm
				try {
					const {
						data: res
					} = await routerPath(
						`cid=${cid}&vclN=${vclN}&sign=${data}&vco=${vco}&qryBtm=${qryBtm}&qryEtm=${qryEtm}`
					)
					this.show=false
					this.show1=false
					let listArr=[]
					const points=[]
					this.markers=res.result.parkArray
					this.markers.map(item=>{
							const obj = {
											id: item.id,
											width: 30,
											height: 30,
											//将经纬度进行重新赋值，不覆盖将默认latitude: 39.909,longitude: 116.39742,时地图移动到标点位置
											latitude: this.latitude=(item.parkLat/600000).toFixed(6),
											longitude: this.longitude=(item.parkLon/600000).toFixed(6),
										}
										listArr.push(obj)
										const line={
											latitude: (item.parkLat/600000).toFixed(6),
											longitude: (item.parkLon/600000).toFixed(6),
										}
										points.push(line)
					})
					this.markers= listArr
					this.polyline[0].points=points
				} catch (e) {}
			},
			async transTimeManageV3(data) {
				var cid ='417a1452-00ff-4060-af52-f959d5b74374'
				 var vnos=`${this.val}`
				var sign=data
				try {
					const {
						data: res
					} = await transTimeManageV3(
						`cid=${cid}&vnos=${vnos}&sign=${data}`
					)
					this.show=false
					this.show1=false
					if(res.status!=1001){
						uni.showToast({
						  title: `${res.result}`,
						  icon: "none",
						  duration: 2000,
						});
						return false
					} 
					if(res.status===1001){
						this.topshows=true
						this.placeList=res.result.firstVcl
						if(res.result.firstVcl.drc===0){
							this.drc='正北'
						}else if(res.result.firstVcl.drc>0 && res.result.firstVcl.drc<90){
							this.drc='东北'
						}else if(res.result.firstVcl.drc===90){
							this.drc='正东'
						}else if(res.result.firstVcl.drc>90 && res.result.firstVcl.drc<180){
							this.drc='东南'
						}else if(res.result.firstVcl.drc===180){
							this.drc='正南'
						}else if(res.result.firstVcl.drc>180 && res.result.firstVcl.drc<270){
							this.drc='西南'
						}else if(res.result.firstVcl.drc===270){
							this.drc='正西'
						}else if(res.result.firstVcl.drc>270 && res.result.firstVcl.drc<=359){
							this.drc='西北'
						}
						this.getYMDHMS(res.result.firstVcl.utc)
						//经度
						var x=res.result.firstVcl.lat/600000;
						// //纬度
						var y=res.result.firstVcl.lon/600000;
						this.getplace(x.toFixed(6),y.toFixed(6))
					}
				} catch (e) {}
			},
		// 	 transformLat(x,y)
		// 	{
		// 		var pi = 3.14159265358979324;
		// 		var a = 6378245.0;
		// 		var ee = 0.00669342162296594323;
		// 	    var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
		// 	    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
		// 	    ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
		// 	    ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
		// 	    return ret;
		// 	},
		// 	 transformLon(x,y)
		// 	{
		// 		var pi = 3.14159265358979324;
		// 		var a = 6378245.0;
		// 		var ee = 0.00669342162296594323;
		// 	    var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
		// 	    ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
		// 	    ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
		// 	    ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
		// 	    return ret;
		// 	},
		// 	transform(wgLat,wgLon){
		// 		var pi = 3.14159265358979324;
		// 		var a = 6378245.0;
		// 		var ee = 0.00669342162296594323;
		// 	    var mars_point={lon:0,lat:0};
		// 	    var dLat = this.transformLat(wgLat - 105.0, wgLon - 35.0);
		// 	    var dLon = this.transformLon(wgLat - 105.0, wgLon - 35.0);
		// 	    var radLat = wgLat / 180.0 * pi;
		// 	    var magic = Math.sin(radLat);
		// 		console.log(magic,'1')
		// 	    magic = 1 - ee * magic * magic;
		// 	    var sqrtMagic = Math.sqrt(magic);
		// 	    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
		// 	    dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
		// 	    mars_point.lat = wgLat + dLat;
		// 	    mars_point.lon = wgLon + dLon;
		// 	  console.log(mars_point,'mars')
		// 	},
			opens(){
				 this.show = true
			},
			opens1(){
				 this.show1 = true
			},
			 open() {
			        // console.log('open');
			      },
				  open1() {
				         // console.log('open');
				       },
			      close() {
			        this.show = false
					 this.show1 = false
			        // console.log('close');
			      },
				  // 使用次数弹窗
				  orderopen() {
				         // console.log('open');
				       },
				       orderclose() {
				         this.ordershow = false
				         // console.log('close');
				       },
					     // 支付弹窗
					   payopen() {
					          // console.log('open');
					        },
					        payclose() {
					          this.payshow = false
					          // console.log('close');
					        },
							topopen() {
							       // console.log('open');
							     },
							     topclose() {
							       this.topshows = false
							       // console.log('close');
							     },
				  numberInputResult(e) {
				    this.defaultNum = e;
					this.val=e
					this.vals=e
				  },
			sectionChange(index) {
			this.curNow = index
		},
		true1(){
			this.show=false
			this.val=`${this.val}_${this.carvalue}`
		},
		trues(){
			this.show1=false
		},
		//日期
		todate(){
			console.log('123')
		},
	// 获取用户详情
	async GetUserById() {
		var id = getValue('id')
		try {
			const {
				data: res
			} = await GetUserById({
				id
			})
			this.nowMoney=res.result.balanceAmt
		} catch (e) {}
	},
		to_search(){
			if (this.val == ""|| this.val == NaN || this.val == undefined ) {
			  uni.showToast({
			    title: "车牌号不能为空",
			    icon: "none",
			    duration: 2000,
			  });
			  return false;
			}
			
	   if (this.remainingAttempts > 0) {
	         // 执行刷新操作
	         this.performRefresh();
	         // 更新剩余刷新次数
	         this.remainingAttempts--;
	         // 更新刷新时间
	         this.lastRefreshTime = new Date().getTime();
	         // 保存到本地存储
	         this.saveToLocalStorage();
			 this.CreateSign()
			 this.topshows=true 
			 var list=this.historyList
				  list.unshift(`${this.val}`) 
			   // 把列表储存到本地
			   setValue('historyList', list)
	       } else if(this.remainingAttempts===0){
	         // 提示用户刷新次数已用完
	         uni.showToast({
	           title: '刷新次数已用完，请等待',
	           icon: 'none',
	         });
			  this.ordershow=true
			 this.GetUserById()
	       }
		   let value = getValue('historyList')
		   		if (value) {
		   			this.historyList = JSON.parse(value).slice(0,6)
		   		}
		},
		to_search1(){
			if (this.val == ""|| this.val == NaN || this.val == undefined ) {
			  uni.showToast({
			    title: "车牌号不能为空",
			    icon: "none",
			    duration: 2000,
			  });
			  return false;
			}
			let value = getValue('historyList')
					if (value) {
						this.historyList = JSON.parse(value).slice(0,6)
					}
			if (this.remainingAttempts > 0) {
			      // 执行刷新操作
			      this.performRefresh();
			      // 更新剩余刷新次数
			      this.remainingAttempts--;
			      // 更新刷新时间
			      this.lastRefreshTime = new Date().getTime();
			      // 保存到本地存储
			      this.saveToLocalStorage();
				  this.CreateSign1()
				  this.topshows=true
				 // var list=this.historyList
				 //  list.unshift(`${this.val}`) 
				 //   // 把列表储存到本地
				 //   setValue('historyList', list)
			    } else if(this.remainingAttempts===0){
			      // 提示用户刷新次数已用完
			      uni.showToast({
			        title: '刷新次数已用完，请等待',
			        icon: 'none',
			      });
				  this.ordershow=true
				  this.GetUserById()
			    }
		},
		performRefresh() {
		    // 实现具体的刷新操作
		    // ...
		  },
		  saveToLocalStorage() {
		    // 保存数据到本地存储
		    setValue('lastRefreshTime', this.lastRefreshTime);
		   setValue('remainingAttempts', this.remainingAttempts);
		  },
		  loadFromLocalStorage() {
		    // 从本地存储加载数据
		    this.lastRefreshTime = getValue('lastRefreshTime') ;
		    this.remainingAttempts = getValue('remainingAttempts');
		  },
		  checkRefreshAvailability() {
		    // 检查是否需要恢复刷新次数
		    if (this.lastRefreshTime) {
		      const currentTime = new Date().getTime();
		      const elapsedTime = currentTime - this.lastRefreshTime;
		      if (elapsedTime >= this.refreshCooldown) {
		        // 已经过了24小时，重置刷新次数
		        this.remainingAttempts = this.maxAttempts;
		        this.lastRefreshTime = null;
		        this.saveToLocalStorage();
		      }
		    }
						  },
		//支付
		topay(){
		 this.payshow=true
		 this.ordershow=false
		 
		},
		pays(){
			this.CreateTrade()
		},
		// 创建交易订单
		async CreateTrade() {
		  var payerUserId = getValue("id");
		  var amount = this.totalFee;
		  var canInvoiced = this.canInvoiced;
		    var payType = 3;
		    var payDestination = 4;
		  if (amount == "") {
		    uni.showToast({
		      title: "充值金额不能为空",
		      icon: "none",
		      duration: 2000,
		    });
		    return false;
		  }
		  try {
		    const { data: res } = await CreateTrade({
		      payerUserId,
		      amount,
		      payDestination,
		      canInvoiced,
		      payType,
		    });
			  this.yeCreateTrade(res.result.data.tradeNumber);
		  } catch (e) {}
		},
		//余额支付
		async yeCreateTrade(res) {
		  var totalAmount = this.totalFee;
		  var tradeNo = "";
		  var outTradeNo = res;
		  console.log(res);
		  var memo = "交保证金";
		  try {
		    const { data: res } = await PushNotify({
		      totalAmount,
		      tradeNo,
		      outTradeNo,
		      memo,
		    });
		
		    if (res.result.success == false) {
		      uni.showToast({
		        title: `${res.result.message}`,
		        icon: "error",
		        duration: 2000,
		      });
		      return false;
		    } else {
		      uni.showToast({
		        title: `充值成功`,
		        icon: "success",
		        duration: 2000,
		      });
		    }
		  } catch (e) {}
		},
		//跳转微信支付页面
		weipay(){
			uni.navigateTo({
				url:'/pages/Calllog/weipay?totalFee='+this.totalFee
			})
			this.payshow=false
		},
		increase(item){
			this.val=item
		},
		  getYMDHMS (timestamp) {
			 var dateTime = new Date(parseInt(timestamp))  // 补3个0， 十三位的时间戳
				  var year = dateTime.getFullYear();
				  var month = dateTime.getMonth() + 1;
				  if(month > 0 && month <10){
				    month = "0" + month;
				  }
				  var day = dateTime.getDate();
				  if(day > 0 && day < 10){
				    day = "0"+day;
				  }
				  var hour = dateTime.getHours();
				  if(hour > 0 && hour < 10){
				    hour = "0"+hour;
				  }
				  var minute = dateTime.getMinutes();
				  if(minute > 0 && minute < 10){
				    minute = "0"+minute;
				  }
				  var second = dateTime.getSeconds();
				  if(second > 0 && second < 10){
				    second = "0"+second;
				  }
				  
				  // var timeSpanStr = year + '-' + month + '-' + day ;  // 年月日
			  	  var timeSpanStr = year + '-' + month + '-' + day+ ' ' +hour +':'+ minute +':'+ second; // 年月日 时分秒
                  this.times=timeSpanStr
		    }
		}
	}
</script>

<style lang="scss">
	page {
	  background-color: #f7f7f7;
	  padding: 0 15upx;
	}
	.map {
	  position: fixed;
	  top: 0upx;
	  bottom: 20upx;
	  left: 0upx;
	  right: 0;
	}
	
	#map_container {
	  width: 100%;
	  height: 83%;
	}

	.footer{
		 position: fixed;
		 background-color: #fff;
		width: 100%;
		height: 30%; 
		bottom: 10upx;
		left: 0upx;
		right: 0;
		border-radius: 30upx 30upx 0 0;
		.footer-top{
			border: 1px solid #fff;
			height: 22%;
			.u-subsection{
				 background-color: #fff;
				 border: 1px solid #fff;
				height: 95%;
				// .u-subsection__bar{
				// 	border-radius: 0 0 30upx 0;
				// 	-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%,  0% 100%);
				// }
			}
		}
		.box {
			width: 100%;
			display: flex;
		  align-items: center;
		    // 清空输入框右侧的圆角
		    .u-search{
				width: 100upx;
				height: 200upx;
				padding: 40upx;
				.u-search__content{
					padding: 10upx;
				}
		    }
		  
		}
		 
		.btn {
		    height: 80rpx;
		    width:170upx;
		    line-height: 64rpx;
		    text-align: center;
		     background: rgba(239, 77, 61, 1);
		    border-radius: 0 8rpx 8rpx 0;
		    color: #fff;
			border-radius: 5px;
			margin-right: 30upx;
		}
		.history{
			font-size: 26upx;
			margin-left: 6%;
			margin-top: -5%;
		}
		.car-number{
			height: 720upx;
		}
		//弹窗
		.popup-head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20upx;
			.popup-history{
				border: 1px solid rgba(239, 77, 61, 1);
				border-radius: 20upx;
				color: rgba(239, 77, 61, 1);
				font-size: 24upx;
				padding: 5upx;
			}
		}
		.car-number-inputs{
			
			.car-input-container{
				width: 810upx;
				margin-top: 60upx;
				margin-left: 30upx;
			}
		}
		.popup-btn{
			button{
				width: 91%;
				line-height: 60upx;
				color: #fff;
				margin-left: 40upx;
				margin-top: 50upx;
				background-color: rgba(239, 77, 61, 1);
			}
	  }
	}
	.orders{
		position: fixed;
		z-index: 1;
		top: 30%;
		right: 10upx;
	    padding: 10upx 10upx 10upx 10upx;
		background-color:rgba(255, 255, 255, 0.7);
		border-radius: 10upx;
		
		.order-text{
			color: rgba(239, 77, 61, 1);
		}
	}
	.u-popup__content{
		border-radius: 20upx;
	}
	.err-img{
		position: fixed;
		top: 33%;
		left: 43%;
		border-radius: 100upx;
		background-color: #fff;
		
		image{
			width: 100upx;
			height: 90upx;
		}
	}
	.order-popup{
		width: 600upx;
		height: 360upx;
		
		.order-p1{
			font-size: 36upx;
			font-weight: bold;
			text-align: center;
			padding: 80upx 0 60upx 0;
		}
		.order-p2{
			font-size: 28upx;
			text-align: center;
			color: rgba(128, 128, 128, 1);
		}
		button{
			font-size: 30upx;
			width: 240upx;
			line-height: 60upx;
			margin-top: 50upx;
			color: #fff;
			background-color: rgba(239, 77, 61, 1);
		}
	}
	.contact_box {
		padding: 40upx;
		height: 500upx;
		text {
			display: block;
			font-size: 35upx;
			font-weight: bold;
		}
	
		.contact_box1 {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40upx;
			padding-left: 38%;
			padding-bottom: 10%;
			border-bottom:1px solid rgba(128, 128, 128, 1);
	        .u-icon {
	        		  position: fixed;
	        		  bottom:34%;
					  right: 20upx;
	        }
			image {
				width: 45upx;
				height: 45upx;
			}
	
			input {
				font-size: 40upx;
				font-weight: bold;
				padding-left: 10upx;
			}
		}
		.contact_box2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40upx;
			.contact_box2_text{
				display: flex;
				align-items: center;
				margin-left: -200upx;
				text:nth-child(2){
					margin-top: 10upx;
					font-size: 28upx;
					color: rgba(128, 128, 128, 1);
				}
			}
			image {
				width: 60upx;
				height: 60upx;
			}
		}
		.weixinpay{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40upx;
			text{
				margin-left: -360upx;
			}
			image {
				width: 60upx;
				height: 60upx;
			}
		}
		button{
			margin-top: 40upx;
			background-color: rgba(239, 77, 61, 1);
			color: #fff;
		}
	}
	.example-body {
			background-color: #fff;
			margin-top: -40upx;
			padding: 0px 40upx;
			.uni-date{
				width: 71%;
			}
		}
		.carColor{
			display: flex;
			align-items: center;
			justify-content:left;
			width: 600upx;
			margin: 20upx 45upx;
			.uni-stat__select{
				width: 300upx;
				margin-left: 30upx;
			}
		}
		.topinformation{
			.u-icon{
				position: fixed;
				right: 10upx;
				margin: 10upx;
			}
			.topinformation1{
				margin-top: 30upx;
				margin-left: 20upx;
				width: 100%;
				font-size: 26upx
			}
		}
		.searchHistoryItem {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		.searchHistoryItem view {
			/* width: 50px; */
			height: 30px;
			margin: 3px 3px;
			text{
				background-color: rgba(239, 77, 61, 1);
				color: #fff;
				padding: 1upx;
				border-radius: 10upx;
			}
		}
		
		// 确认按钮
		.uni-datetime-picker--btn{
		 background-color:rgba(239, 77, 61, 1)!important;
		  color: #fff;
		  font-family: PingFang SC;
		  font-size: 14px;
		  font-weight: 400;
		}
		// 选中区域
		.uni-calendar-item--multiple{
		  background-color: #FFF3F4;
		}
		// 前置选项背景
		.uni-calendar-item--before-checked{
		  background-color:rgba(239, 77, 61, 1)!important;
		}
		// 后置选项背景
		.uni-calendar-item--after-checked{
		  background-color: rgba(239, 77, 61, 1)!important;
		  }
</style>